<!-- subpkg_consult/payment/index.vue -->
<script setup>
	import { ref } from 'vue'
	import useConsultStore from '@/stores/consult'
	import { preOrderApi, createOrderApi } from '@/services/consult'
	import { patientDetailApi } from '@/services/patinet.js'
	import { orderPayApi } from '@/services/payment.js'

	// 患者相关的数据（不具有响应性）
	const { type, illnessType, patientId, illnessInfo, consultFlag, depId } =
		useConsultStore()
	// 预付订单信息
	const preOrderInfo = ref({})
	// 获取组件实例
	const paymentPopupRef = ref(null)

	// 待支付订单ID
	const orderId = ref('')

	// 生成预付订单
	async function createPreOrder() {
		// 预付订单信息
		const { code, data, message } = await preOrderApi(type, {
			illnessType,
		})
		const {
			data: { name, age, genderValue },
		} = await patientDetailApi(patientId)

		// 检测接口是否调用成功
		if (code !== 10000) return uni.utils.toast(message)
		// 渲染订单数据
		preOrderInfo.value = { ...data, name, age, genderValue }
	}
	// 图片列表
	const pictures = illnessInfo.pictures.map((v) => {
		return { id: v.uuid, url: v.url }
	})

	const pay = async (channelIndex) => {
		// 调用问诊订单接口函数
		const res = await createOrderApi({
			type: type, // 就诊类型1找医生 2极速问诊 3开药问诊默认是1
			patientId: patientId, // 使用优惠券，必传可使用优惠券id
			illnessDesc: illnessInfo.illnessDesc, // 病情--症状描述
			depId: depId, // 选择的科室id-极速问诊必填(选择的科室)
			consultFlag: consultFlag, // 找医生/极速问诊-是否就诊过0未就诊1就诊过
			illnessType: illnessType, // 极速问诊类型：0普通1三甲
			pictures, // 补充病例信息-图片集合
			illnessTime: illnessInfo.illnessTime, // 找医生/极速问诊-患病时间1一周内2一月内3半年内4半年以上
		})
		// 获取订单Id
		orderId.value = res.data.id
		console.log(channelIndex, 'channelIndex')
		// 判断选择付款方式
		if (channelIndex === 0) return uni.utils.toast('暂不支持微信支付!')

		// 调用后端提供的支付接口
		const { code, data, message } = await orderPayApi({
			orderId: orderId.value,
			paymentMethod: channelIndex.index,
			payCallback: 'http://localhost:5173/#/subpkg_consult/room/index',
		})

		// #ifdef H5
		// 引导用户支付（地址跳转方式）
		uni.showLoading({
			title: '跳转支付中...',
			mask: true,
		})
		window.location.href = data.payUrl
		// #endif
		console.log(res.data.id, 'res')
	}
	const onClose = async () => {
		const { cancel } = await uni.showModal({
			title: '关闭支付',
			content:
				'取消支付将无法获得医生回复，医生接诊名额有限，是否确认关闭？',
			cancelText: '仍要关闭',
			cancelColor: '#848484',
			confirmText: '继续支付',
			confirmColor: '#16C2A3',
		})
		if (cancel) {
			paymentPopupRef.value.close()
		}
	}

	// 生成预支付订单
	createPreOrder()
</script>

<template>
	<scroll-page>
		<view class="payment-page">
			<uni-section
				title-font-size="32rpx"
				title-color="#121826"
				padding="30rpx"
				:title="`图文问诊1 ${preOrderInfo.payment}元`"
			>
				<uni-list :border="false">
					<uni-list-item
						title="极速问诊"
						note="自动分配医生"
						thumb="/static/uploads/doctor-avatar.jpg"
						thumb-size="lg"
					/>
					<uni-list-item
						title="优惠券"
						show-arrow
						:right-text="`-¥${preOrderInfo.couponDeduction}`"
					/>
					<uni-list-item title="积分抵扣">
						<template #footer>
							<view class="uni-list-text-red"
								>-¥{{ preOrderInfo.pointDeduction }}</view
							>
						</template>
					</uni-list-item>
					<uni-list-item title="实付款">
						<template #footer>
							<view class="uni-list-text-red"
								>¥{{ preOrderInfo.actualPayment }}</view
							>
						</template>
					</uni-list-item>
				</uni-list>
			</uni-section>

			<view class="dividing-line"></view>

			<uni-section
				title-font-size="32rpx"
				title-color="#121826"
				padding="30rpx"
				title="患者资料"
			>
				<uni-list :border="false">
					<uni-list-item title="患者信息">
						<template #footer>
							<view class="uni-list-text-gray">
								{{ preOrderInfo.name }} |
								{{ preOrderInfo.genderValue }} |
								{{ preOrderInfo.age }}岁
							</view>
						</template>
					</uni-list-item>
					<uni-list-item
						border
						title="病情描述"
						:note="illnessInfo.illnessDesc"
					/>
				</uni-list>
			</uni-section>

			<!-- <view class="payment-agreement">
        <radio color="#20c6b2" value="1" />
        我已同意<text style="color: #20c6b2">支付协议</text>
      </view> -->
		</view>
		<!-- 下一步操作 -->
		<view class="next-step">
			<view class="total-amount">
				合计:
				<text class="number">¥{{ preOrderInfo.actualPayment }}</text>
			</view>
			<button class="uni-button" @click="paymentPopupRef.open()">
				立即支付
			</button>
		</view>
	</scroll-page>
	<custom-payment
		:amount="(preOrderInfo.actualPayment || 0).toFixed(2)"
		ref="paymentPopupRef"
		@confirm="pay"
		@close="onClose"
		:order-id="orderId"
	></custom-payment>
</template>

<style lang="scss">
	@import './index.scss';
</style>
